<style lang="less">
    @import '../styles/menu.less';
</style>

<template>
    <div class="sidebarMenu">
        <div v-for="(item,index) in menuList">
            <div :class="menuPath==index ?'submenu_icon_active':'submenu'" 
                 :style="{color: menuActive==index?'#f2b05e':''}" @mouseenter="onMouseOver(index)"
                 @mouseleave="onMouseOut()" @click="changeMenu(index)">
                <i :class="item.icon" style="font-size: 16px"></i>
                <div class="submenu_title">{{item.title}}</div>
            </div>
            <div class="childmenu" v-if="menuPath==index">
                <div class="child_title">{{item.title}}</div>
                <template v-for="(child,key) in item.children">
                    <router-link :to="menuList[index].path + '/' + menuList[index].children[key].path">
                        <div :class="childEnter==key?'MenuItem_active':'MenuItem'" @click="selectChilditem(index,key)">
                            <Icon :type="child.icon"></Icon>
                            <span class="layout-text">{{child.title}}</span>
                        </div>
                    </router-link>
                </template>
            </div>
            <div class="childmenu" v-else-if="menuPath == -1">
                <div class="child_title">首页</div>
                <div class="MenuItem_active">
                    <Icon></Icon>
                    <span class="layout-text">首页</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'sidebarMenu',
        data() {
            return {
                menuPath: 0,
                childEnter: 0,
                menuActive:-1,
                path: "",
                children: []
            };
        },
        components: {},
        props: {
            class:{
                type: String,
            },
            shrink: {
                type: Boolean,
                default: false
            },
            menuList: {
                type: Array,
                required: true
            },
            beforePush: {
                type: Function
            },
        },
        mounted() {
            this.init()
        },
        computed: {},
        watch: {
            $route(to) {
                this.$store.commit('setCurrentPageName', to.name)
                localStorage.currentPageName = to.name
                if(to.name.indexOf('home_index') != -1){
                    this.menuPath = -1 
                    this.childEnter = -1
                }else{
                    let menuName = this.menuList.map(item => {
                      return item.name
                    })
                    let nowIndex = 0 
                    for (var i = 0 ; i < this.menuList.length ; i++) {
                        let menuPath = this.menuList[i].children.map(item => {
                            return item.name
                        })
                        if(menuPath.indexOf(to.name) != -1){
                            nowIndex = i
                            this.childEnter = menuPath.indexOf(to.name)
                        }
                    }
                    this.menuPath = menuName.indexOf(this.menuList[nowIndex].name) 
                    this.$store.commit('increateTag', this.menuList[this.menuPath].children[this.childEnter])
                    this.$store.commit('setmenuPath', this.menuList[this.menuPath].path)
                }
            },
        },
        methods: {
            init() {
                if(this.$route.name.indexOf('home') != -1){
                   this.menuPath = -1 
                   this.childEnter = -1
                }else{
                   this.openName()
                }
            },
            openName() {
                let menuList = this.menuList
                let currentPath = this.$store.state.app.currentPath
                let menuPath = menuList.map(item => {
                    return item.path
                })
                this.menuPath = menuPath.indexOf(localStorage.menuPath)
                let menuChildren = menuList[this.menuPath].children.map(item => {
                    return item.path
                })
                if (localStorage.currentPageName) {
                    this.childEnter = menuChildren.indexOf(localStorage.currentPageName)
                }

            },
            onMouseOver(index) {
               this.menuActive = index
            },
            onMouseOut(index) {
               this.menuActive = -1
            },
            changeMenu (index) {
                this.childEnter = 0
                this.path = this.menuList[index].path + '/' + this.menuList[index].children[0].path
                let name =  this.menuList[index].name
                this.menuPath = index
                this.$router.push({
                    path: this.path
                })
                this.$emit('on-change', index);
            },
            selectChilditem(index,key) {
                this.$store.commit('increateTag', this.menuList[index].children[key])
                this.childEnter = key
            },
            handleMenu() {

            },
        }
    };
</script>
